// 导入 React，用来创建 react 元素的
import React from 'react';
// 导入对应渲染平台库
import ReactDOM from 'react-dom/client';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// JSX 中的列表渲染：数组 <==> UI（数组每一个元素）
const books1 = ['React', 'Vue', 'Angular'];

// 转化为这样的数组
const books2 = [<li>React</li>, <li>Vue</li>, <li>Angular</li>];

// 数组的map方法，转化数组元素格式的
const books3 = books1.map((item, i) => {
  return <h1 key={i}>{item}</h1>;
});

// 省去 return 的写法
const books4 = books1.map((item, i) => <li key={i}>{item}</li>);

// 列表渲染如下数据
const books = [
  { id: 1, name: 'React' },
  { id: 2, name: 'Vue' },
  { id: 3, name: 'Angular' },
];

const books5 = books.map((item) => <h1 key={item.id}>{item.name}</h1>);

// 页面元素
const el = <div>{books5}</div>;

// 渲染到页面上
root.render(el);
